<template>
  <div class="living_middle">
    <div class="container">
      <h2 class="title block-title">酒店房间列表</h2>
      <div class="col-md-4 wow fadeInLeft" data-wow-delay="0.4s">
        <div class="living_box">
          <a href="#">
            <img src="../../assets/images/l1.jpg" class="img-responsive" alt />
            <span class="sale-box">
              <span class="sale-label">单人房</span>
            </span>
          </a>
          <div class="living_desc">
            <h3>
              <a href="#">单人房</a>
            </h3>
            <p>单人居住哦</p>
            <a @click="orderType(2)" class="btn3">订</a>
            <p class="price">￥88.00</p>
          </div>
          <table border="1" class="propertyDetails">
            <tbody>
              <tr>
                <td>
                  <img src="../../assets/images/area.png" alt style="margin-right:7px;" />12㎡
                </td>
                <td>
                  <img src="../../assets/images/bed.png" alt style="margin-right:7px;" />1 Beds
                </td>
                <td>
                  <img src="../../assets/images/drop.png" alt style="margin-right:7px;" />1 Baths
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-4 wow fadeInLeft" data-wow-delay="0.4s">
        <div class="living_box">
          <a href="#">
            <img src="../../assets/images/l2.jpg" class="img-responsive" alt />
            <span class="sale-box">
              <span class="sale-label">大床房</span>
            </span>
          </a>
          <div class="living_desc">
            <h3>
              <a href="#">大床房</a>
            </h3>
            <p>两个人住哦</p>
            <a @click="orderType(3)" class="btn3">订</a>
            <p class="price">￥128.00</p>
          </div>
          <table border="1" class="propertyDetails">
            <tbody>
              <tr>
                <td>
                  <img src="../../assets/images/area.png" alt style="margin-right:7px;" />24m
                </td>
                <td>
                  <img src="../../assets/images/bed.png" alt style="margin-right:7px;" />2 Beds
                </td>
                <td>
                  <img src="../../assets/images/drop.png" alt style="margin-right:7px;" />1 Baths
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-4 wow fadeInLeft" data-wow-delay="0.4s">
        <div class="living_box">
          <a href="#">
            <img src="../../assets/images/l3.jpg" class="img-responsive" alt />
            <span class="sale-box">
              <span class="sale-label">双人房</span>
            </span>
          </a>
          <div class="living_desc">
            <h3>
              <a href="#">双人房</a>
            </h3>
            <p>情侣套房哦</p>
            <a @click="orderType(1)" class="btn3">订</a>
            <p class="price">￥168.00</p>
          </div>
          <table border="1" class="propertyDetails">
            <tbody>
              <tr>
                <td>
                  <img src="../../assets/images/area.png" alt style="margin-right:7px;" />20 m
                </td>
                <td>
                  <img src="../../assets/images/bed.png" alt style="margin-right:7px;" />1 Beds
                </td>
                <td>
                  <img src="../../assets/images/drop.png" alt style="margin-right:7px;" />1 Baths
                </td>
              </tr>
            </tbody>
          </table>
          
        </div>
      </div>

    </div>
          <div>
            <el-dialog :title="dialogTitle" :visible.sync="roomDialogVisible" center width="25%">
              <order></order>
              <span slot="footer" class="dialog-footer">
                <el-button @click="roomDialogVisible = false">取消</el-button>
                
              </span>
            </el-dialog>
          </div>
  </div>
</template>

<script>
import userOrder from "./order/userOrder";

export default {
  data() {
    return {
      dialogTitle: "预定房间",
      roomData: [],
      roomDialogVisible: false,
      userPhone: "",
      value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
    };
  },

  components: {
    "order": userOrder
  },
  methods:{
    orderType(e){
      this.roomDialogVisible  = true;
      this.$store.commit("setRoomType", e);
    }
  }
};
</script>

<style>
</style>